//--------------------折线图:全科学薪资走势-------------------------
//1.得有盒子(页面布局已经有了 id = "line")
//2.引入echart.min.js(已经引入)
function lineChart() {
    //3.初始化echarts
    let myChart = echarts.init(document.querySelector('#line'))
    //4.配置项
    let option = {
        // 增加标题
        title: {
            text: '2022全学科薪资走势',
            top: '15',
            left: '10',
            textStyle: {
                fontSize: '16'
            }
        },

        // X轴
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            // 轴
            axisLabel: {
                color: '#999',
            },
            //轴线
            axisLine: {
                lineStyle: {
                    color: '#ccc',
                    type: 'dashed'
                },

            },
        },

        // Y轴
        yAxis: {
            type: 'value',
            // Y轴分割线
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },

        // 鼠标移入提示
        tooltip: {
            // 鼠标移入线所在提示
            trigger: 'axis'
        },

        // 网格
        grid: {
            top: '20%'
        },

        //颜色
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: '#5D75F0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },

        //系列数据
        series: [
            {
                data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
                type: 'line',
                //平滑曲线
                smooth: true,
                // 线条样式
                lineStyle: {
                    // 线条宽
                    width: '6',
                },
                // 拐点空心圆大小
                symbolSize: 10,
                // 区域面积渐变
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#499FEE' // 0% 处的颜色
                        }, {
                            offset: 0.8, color: 'rgba(255,255,255,0.2)' // 80% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(255,255,255,0)'// 100% 处的颜色
                        }
                        ],
                        global: false // 缺省为 false
                    },
                },

            }
        ]
    };
    //5.创建图表
    myChart.setOption(option)
}
lineChart()

// ---------------------饼图:班级薪资分布(右上角---------------------------
function classSalaryChart() {
    let myChart = echarts.init(document.querySelector('#salary'))
    let option = {
        // 增加标题
        title: {
            text: '班级薪资分布',
            top: 15,
            left: 10,
            textStyle: {
                fontSize: 16
            }
        },

        //鼠标移入提示
        tooltip: {
            trigger: 'item'
        },

        //图例
        legend: {
            bottom: '6%',
            left: 'center'
        },

        // 系列数据
        series: [
            {
                name: '班级薪资分布',
                type: 'pie',
                radius: ['50%', '64%'],
                // avoidLabelOverlap: false,
                // 每一项样式
                itemStyle: {
                    // 扇形内外圆角半径
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                // 文字标签
                label: {
                    show: false,
                    position: 'center'
                },
                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: '40',
                //         fontWeight: 'bold'
                //     }
                // },
                // 视觉引导线
                labelLine: {
                    show: false
                },
                // 数据
                data: [
                    { value: 1048, name: '1万以下' },
                    { value: 235, name: '1万-2万' },
                    { value: 580, name: '1.5万-2万' },
                    { value: 484, name: '2万以上' }
                ],
            }
        ],

        //颜色
        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A']
    };
    myChart.setOption(option)
}
classSalaryChart()

//-----------------------------柱状图------------------------------------
function groupSalaryChart() {
    let myChart = echarts.init(document.querySelector('#lines'))
    let option = {
        // 网格
        grid: {
            left: 70,
            top: 30,
            right: 30,
            bottom: 50
        },
        // 鼠标移入提示
        tooltip: {
            trigger: 'item'
        },

        legend: {},

        xAxis: {
            type: 'category',
            data: ['甄姬', '小乔', '妲己', '张飞', '牛魔', '虞姬', '蔡文姬', '貂蝉'],
            axiosLabel: {
                color: '#999'
            },
            // 轴线类型
            axisLine: {
                lineStyle: {
                    color: '#ccc',
                    type: 'dashed'
                },
            },
        },

        yAxis: {
            // 分隔线
            splitLine: {
                lineStyle: {
                    type: 'dotted'
                }
            }
        },

        color: [{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#34D39A' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            }, {
                offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }
        ],

        series: [
            {
                data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
                type: 'bar',
                name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
            },
            {
                data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
                type: 'bar',
                name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
            }
        ]
    };
    myChart.setOption(option)
}
groupSalaryChart()

//-----------------------------饼图(左下角)---------------------------------
function sexSalaryChart() {
    const myChart = echarts.init(document.querySelector('#gender'))
    option = {
        title: [
            {
                text: '男女薪资分布',
                top: 10,
                left: 10,
                textStyle: {
                    fontSize: 16
                }
                // 距离顶部10，距离左边10，文字大小16
            },
            {
                text: '男生',
                top: '45%',
                left: '45%',
                textStyle: {
                    fontSize: 12
                }
                // 距离顶部45%，距离左边45%，文字大小12
            },
            {
                text: '女生',
                top: '85%',
                left: '45%',
                textStyle: {
                    fontSize: 12
                }
                // 距离顶部85%，距离左边45%，文字大小12
            },
        ],
        //鼠标移入提示
        tooltip: {
            trigger: 'item'
        },

        color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],

        series: [
            {
                name: '男生薪资分布',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '30%'],
                data: [
                    { value: 15, name: '1万以下' },
                    { value: 235, name: '1万-2万' },
                    { value: 580, name: '1.5万-2万' },
                    { value: 484, name: '2万以上' }
                ]
            },
            {
                name: '女生薪资分布',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', '70%'],
                data: [
                    { value: 1048, name: '1万以下' },
                    { value: 235, name: '1万-2万' },
                    { value: 580, name: '1.5万-2万' },
                    { value: 484, name: '2万以上' }
                ]
            }
        ]

    };
    myChart.setOption(option)
}
sexSalaryChart()

// ----------------------------地图:籍贯分布----------------------------

function mapChart() {
    let myChart = echarts.init(document.querySelector('#map'))
    const mapData = [];
    let option = {
        title: {
            text: '籍贯分布',
            textStyle: {
                fontSize: '16'
            },
            top: '10',
            left: '10'
        },
        // 系列数据
        series: [{
            name: '籍贯分布',
            type: 'map',//表示图表的类型是地图
            map: 'china',//表示中国地图
            // 设置每个区域（每个省）的名字
            label: {
                //显示省的名字
                show: true,
                fontSize: 10,
                color: 'rgba(0,0,0,0.8)'
            },
            // 默认每个省的样式
            itemStyle: {
                areaColor: '#BA324A',
                borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            //设置高亮状态（鼠标移入）的样式
            emphasis: {
                itemStyle: {
                    areaColor: '#34D39A',
                    borderWidth: 0,
                    shadowBlur: 20,//阴影模糊大小
                    shadowOffsetX: 0,//阴影偏移
                    shadowOffsetY: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }

            },
            //设置每个省的数据
            mapData: [
                { name: '南海诸岛', value: 0 },
                { name: '北京', value: 3 },
                { name: '天津', value: 2 },
                { name: '上海', value: 4 },
                { name: '重庆', value: 1 },
                { name: '河北', value: 20 },
                { name: '河南', value: 23 },
                { name: '云南', value: 0 },
                { name: '辽宁', value: 15 },
                { name: '黑龙江', value: 12 },
                { name: '湖南', value: 2 },
                { name: '安徽', value: 5 },
                { name: '山东', value: 18 },
                { name: '新疆', value: 0 },
                { name: '江苏', value: 5 },
                { name: '浙江', value: 1 },
                { name: '江西', value: 4 },
                { name: '湖北', value: 3 },
                { name: '广西', value: 2 },
                { name: '甘肃', value: 9 },
                { name: '山西', value: 11 },
                { name: '内蒙古', value: 14 },
                { name: '陕西', value: 14 },
                { name: '吉林', value: 10 },
                { name: '福建', value: 0 },
                { name: '贵州', value: 0 },
                { name: '广东', value: 0 },
                { name: '青海', value: 3 },
                { name: '西藏', value: 0 },
                { name: '四川', value: 1 },
                { name: '宁夏', value: 1 },
                { name: '海南', value: 0 },
                { name: '台湾', value: 0 },
                { name: '香港', value: 0 },
                { name: '澳门', value: 0 }
            ],
            // 鼠标移入提示
            tooltip: {
                // 自定义提示的格式为：河北：20 位学员 这样的格式
                //提示框边框透明
                borderColor: 'transparent',
                // 提示框背景色：rgba(0,0,0,0.5)
                backgroundColor: 'rgba(0,0,0,0.5)',
                //文字颜色：#fff
                textStyle: {
                    color: '#fff'
                }

            },
            // 视觉映射组件（visualMap）
        }]
    }
    myChart.setOption(option)
}
mapChart()